<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片式图 -->
    <el-card>
      <el-row :gutter='20'>
        <el-col :span="8">
          <!-- 搜索框 -->
          <el-input placeholder="请输入搜索内容" v-model='queryInfo.query' clearable @clear="getList">
            <el-button slot="append" icon="el-icon-search" @click='getList'></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click='addGoods'>添加商品</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data='goodslist' border stripe style="margin-top:20px">
        <el-table-column label='操作'>
          <template>
            <el-button type='primary' icon='el-icon-edit' size='mini'>编辑</el-button>
            <el-button type='danger' icon='el-icon-error' size='mini'>删除</el-button>
          </template>
        </el-table-column>
        <TableList :col='column'></TableList>
        <el-table-column label='创建时间'>
          <template slot-scope='scope'>
            <span>{{scope.row.upd_time | formatDate}}</span>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[10,20, 30, 40]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script scoped>
import { ListAPI } from '@/api/list'
import TableList from '../table.vue'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { TableList },
  // 组件状态值
  data () {
    return {
      column: [{
        name: '商品名称',
        type: 'goods_name'
      }, {
        name: '商品价格',
        type: 'goods_price'
      }, {
        name: '商品重量',
        type: 'goods_weight'
      }],
      goodslist: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    addGoods () {
      this.$router.push('/add')
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getList()
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getList()
    },
    async getList () {
      const { data: res } = await ListAPI(this.queryInfo)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.total = res.data.total
      this.goodslist = res.data.goods
    }
  },
  filters: {

  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.getList()
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  }
}
</script>

<style scoped>
</style>
